<template>
  <div class="main">
    <div class="return" @click="handleReturn()">
      <img
        src=""
        alt
      />
    </div>
    <div class="cinema">
      <div class="header-title">{{ datalist.name }}</div>
      <div class="tags">
        <ul>
          <li v-for="data in newdatalist" :key="data">
            {{ data }}
          </li>
          <li class="hide">
            <i class="iconfont icon-changyongicon"></i>
          </li>
        </ul>
      </div>
      <div class="addres">
        <img
          src=""
          alt
        />
        <span>{{ datalist.address }}</span>
        <a href="#">
          <img
            src=""
            alt
          />
        </a>
      </div>
    </div>
    <div class="boo" style="margin-bottom: 61.667vw" v-if="isif">
      <mt-swipe
        @change="handleChange"
        :auto="0"
        :show-indicators="false"
        id="mint-swipe-items-wrap"
      >
        <mt-swipe-item
          v-for="data in this.$store.state.nowplayingList"
          :key="data.filmId"
        >
          <div class="ccc">
            <div
              :style="{ 'background-image': 'url(' + data.poster + ')' }"
              class="bbb"
            ></div>
            <img :src="data.poster" alt />
          </div>
        </mt-swipe-item>
      </mt-swipe>
      <div class="shen" @click="handleChangPag(nowlist.filmId)">
        <div class="title">
          <span class="title-span1">{{ nowlist.name }}</span>
          <span class="title-span2">{{ nowlist.grade }}</span>
          <span class="title-span3">分</span>
        </div>
        <div class="desc">
          <span>{{ nowlist.category }} | {{ nowlist.runtime }} 分钟</span>
          <span v-for="name in nowlist.actors" :key="name.name"
            >| {{ name.name }}</span
          >
        </div>
        <div class="an">
          <img
            src=""
            alt
          />
        </div>
      </div>
      <div class="bar">
        <detailSwiper class="actorswiper" perview="3" myclassname="actorswiper">
          <li
            class="swiper-slide"
            v-for="(time, index) in nowlist.showDate"
            :key="time"
            @click="handleClick(time, index)"
            :style="colin === index ? 'color:orange' : ''"
          >
            <span @click="handle">{{ time | shenpremiere1 }}</span>
          </li>
        </detailSwiper>
        <div class="xian" :style="left"></div>
      </div>
      <div class="list" v-for="list in list" :key="list.scheduleId">
        <div class="left">
          <div class="aaa">{{ list.showAt | shenpremiere2 }}</div>
          <div>{{ list.endAt | shenpremiere2 }} 散场</div>
        </div>
        <div class="center">
          <div class="center-1 aaa">
            {{ list.filmLanguage }} {{ list.imagery }}
          </div>
          <div class="center-1">{{ list.hallName }}</div>
        </div>
        <div class="right">
          <div class="right-1">
            ￥
            <span>{{ list.salePrice / 100 }}</span>
          </div>
          <div class="right-2" @click="handleTicket(list.scheduleId)">购票</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
import moment from 'moment'
import DetailSwiper from './DetailSwiper'
import { Swipe, SwipeItem } from 'mint-ui'
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)

// 将毫秒数转化成日期
Vue.filter('shenpremiere1', function (data, format) {
  // data*1000，是因为在后台拿到的时间戳是php的，而js的的是比php的多三位，所以需要*1000
  var date = moment(parseInt(data * 1000)).format(format || 'M月D日')
  return date
})
// 将毫秒数转化成时分
Vue.filter('shenpremiere2', function (data, format) {
  // data*1000，是因为在后台拿到的时间戳是php的，而js的的是比php的多三位，所以需要*1000
  var date = moment(parseInt(data * 1000)).format(format || 'HH:mm')
  return date
})

// @click="handlereturn
export default {
  data () {
    return {
      datalist: [], // 存储ticket传来的cinemainfo
      newdatalist: ['前台兑换', '儿童票', '停车', '优惠', '3D眼镜', '影厅介绍'],
      newlist: [], // 存储ticket传来的filminfo
      date: '',
      nowlist: [],
      isif: true,
      left: {
        left: '0vw'
      },
      colin: 0,
      millisecond: '',
      list: [],
      cinemadata: []
    }
  },

  mounted () {
    console.log(this.$route.params)
    var obj = this.$route.params
    console.log('打印ticket传送的参数', obj)
    this.newlist = this.$route.params.filminfo
    if (!this.newlist) {
      this.newlist = this.$route.params.filminfo
    }
    console.log('111', this.$store.state.nowplayingList)
    this.axiosFilms()
  },
  beforeMount () {
    this.$store.dispatch('getNowplayingListAction')
    this.datalist = this.$route.params.cinemainfo
    if (!this.datalist) {
      this.datalist = this.$store.state.cinemainfo
    }

    this.$store.commit('HideMaizuoTabbar', false)
  },
  beforeDestroy () {
    this.$store.commit('ShowMaizuoTabbar', true)
  },
  methods: {
    async axiosSchedules () {
      axios({
        url: `https://m.maizuo.com/gateway/?filmId=${this.nowlist.filmId}&cinemaId=${this.$route.params.cid}&date=1602777600&k=5300605`,
        headers: {
          'X-Client-Info':
            '{"a":"3000","ch":"1002","v":"5.0.4","e":"1601368144305732951998465","bc":"440100"}',
          'X-Host': 'mall.film-ticket.schedule.list'
        }
      }).then((res) => {
        // console.log(res.data.data.schedules);
        console.log('list下schedule', res.data.data)
        this.list = res.data.data.schedules
      })
    },
    handleChange (index) {
      this.nowlist = this.$store.state.nowplayingList[index]
      this.axiosSchedules()
    },
    handleChangPag (id) {
      var router = this.$route.path // 获取当前页面路由路径
      this.$router.push({ name: 'detail', params: { id: id, router: router } })
    },

    async axiosFilms () {
      axios({
        url: `https://m.maizuo.com/gateway/?cinemaId=${this.$route.params.cid}&k=0`,
        headers: {
          'X-Client-Info':
            '{"a":"3000","ch":"1002","v":"5.0.4","e":"15965124511069446856705","bc":"110100"}',
          'X-Host': 'mall.film-ticket.film.cinema-show-film'
        }
      }).then((res) => {
        if (res.data.data.films.length > 0) {
          this.cinemadata = res.data.data.films
          console.log('111', this.cinemadata)
          this.nowlist = this.cinemadata[0]
          this.millisecond = this.nowlist.showDate[0]
          console.log(this.millisecond)
          this.axiosSchedules()
          this.isif = true
        } else {
          this.isif = false
        }
      })
    },
    handle (ev) {
      var width = document.documentElement.clientWidth
      if (ev.pageX > 0 && ev.pageX < width / 3) {
        this.left.left = '0vw'
      } else if (ev.pageX > width / 3 && ev.pageX < (width / 3) * 2) {
        this.left.left = width / 3 + 'px'
      } else {
        this.left.left = (width / 3) * 2 + 'px'
      }
    },
    handleReturn () {
      this.$router.push(`/ticket/${this.cinemadata.filmId}`)
      // this.$router.push('nowplaying')
    },
    handleTicket (scheduleId) {
      // console.log(scheduleId)
      this.$router.push(`/schedule/${scheduleId}`)
    }
  },
  components: { DetailSwiper }
}
</script>

<style lang="scss" scoped>
#mint-swipe-items-wrap {
  height: 55.556vw;
  background: url();
  img {
    margin: 5.556vw auto;
    width: 27.778vw;
    height: 200px;
  }
}
.bottom {
  background: #eee;
  width: 100%;
  height: 200px;
}
#headnav-ul {
  width: 100%;
  background: #fff;
  display: flex;
  list-style: none;
  justify-content: space-evenly; //space-between
}
#headnav-li {
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 14px;
  width: 90px;
}
.shen {
  padding: 4.167vw 0;
  position: relative;
  .title {
    height: 5.556vw;
    margin-bottom: 2.778vw;
    text-align: center;
    .title-span1 {
      font-size: 4.167vw;
      color: #191a1b;
      padding-right: 1.389vw;
    }
    .title-span2 {
      font-size: 4.444vw;
      font-style: italic;
      color: #ffb232;
    }
    .title-span3 {
      font-size: 2.778vw;
      color: #ffb232;
    }
  }
  .desc {
    padding: 0 10.556vw;
    height: 5vw;
    text-align: center;
    color: #797d82;
    font-size: 3.611vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .an {
    position: absolute;
    right: 4.167vw;
    top: 9.722vw;
    img {
      width: 1.111vw;
      height: 2.222vw;
    }
  }
}

.ccc {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    display: block;
    position: relative;
    top: 2.778vw;
    z-index: 9;
  }
}
.bbb {
  width: 100%;
  height: 75%;
  background: no-repeat;
  background-size: 100% 100%;
  filter: blur(5.556vw);
  position: absolute;
}
// .img{
//     width: 100%;
// }
.main {
  background: #fff;
}
.return {
  position: fixed;
  z-index: 1000;
  width: 3.056vw;
  height: 5vw;
  left: 4.167vw;
  top: 3.611vw;
  img {
    width: 3.056vw;
    height: 5vw;
  }
}
.cinema {
  padding-top: 12.222vw;
  .header-title {
    height: 12.222vw;
    width: 100%;
    padding: 0 4.167vw;
    box-sizing: border-box;
    line-height: 12.222vw;
    text-align: center;
    font-size: 4.722vw;
    color: #191a1b;
    background: white;
    z-index: 999;
  }
  .tags {
    padding: 1.389vw 0 4.167vw 0;
    overflow: hidden;
    // height:3.889vw
    ul {
      width: 100%;
      display: flex;
      justify-content: center;
      li {
        width: auto;
        height: auto;
        float: left;
        margin: 0 0.833vw;
        padding: 0 1.111vw;
        border: 0.278vw solid #ffb232;
        color: #ffb232;
        font-size: 2.222vw;
        line-height: 3.611vw;
      }
      .hide {
        border: none;
        font-size: 1.667vw;
        padding: 0;
        position: relative;
        top: 0.278vw;
      }
    }
  }
  .addres {
    display: flex;
    align-items: center;
    padding-left: 4.722vw;
    height: 13.889vw;
    img {
      width: 3.889vw;
      height: 5.833vw;
    }
    span {
      width: 100%;
      padding: 0 3.333vw;
      font-size: 3.889vw;
      height: 5.556vw;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      color: #2c3e50;
    }
    a {
      padding: 0 6.944vw;
      img {
        width: 4.722vw;
        height: 5vw;
      }
    }
  }
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
}
.list {
  height: 20.556vw;
  padding: 4.167vw;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 3.611vw;
  .left {
    float: left;
    width: 27.778vw;
    height: 12.222vw;
  }
  .center {
    float: left;
    width: calc(100% - 27.778vw - 27.778vw - 11.111vw);
    .center-1 {
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
  .right {
    float: right;
    width: 26.944vw;
    position: relative;
    top: 2.5vw;
    div {
      float: left;
    }
    .right-1 {
      width: 12.5vw;
      height: 6.944vw;
      padding-right: 0vw;
      color: #ff5f16;
      font-size: 2.778vw;
      line-height: 6.944vw;
      span {
        font-size: 3.611vw;
      }
    }
    .right-2 {
      width: 13.333vw;
      height: 6.389vw;
      border: 0.278vw solid #ff5f16;
      text-align: center;
      line-height: 6.389vw;
      color: #ff5f16;
      font-size: 3.889vw;
      border-radius: 1.111vw;
    }
  }
  .aaa {
    font-size: 4.167vw;
    color: #191a1b;
  }
}
</style>
